<template>
  <scroll-view class="container" scroll-y="true" @scrolltolower="onScrollToLower">
    <view class="content">
      <view class="list">
        <view class="itemSaleReturn" v-for="(item,index) in arrivalOrderList" :key="index">
          <view class="iTop" @click="lookDetailInfo(item.code)">
            <view class="saleReturnShop">
              <view>订单编号:{{ item.orderNumber }}</view>
              <view>品牌方:{{ item.brandName }}</view>
              <view>到货总数量:{{ item.arrivalTotal }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import {getArrivalOrderList} from "@/apis/ArrivalOrder";

export default {
  data() {
    return {
      queryListParam: {
        pageNum: 1,
        pageSize: 10,
        warehouseScanStatus: 2
      },
      arrivalOrderList: [],
    }
  },
  methods: {
    // 销售退货单列表变更, 重新获取数据
    async changeArrivalOrderList() {
      this.arrivalOrderList = (await getArrivalOrderList(this.queryListParam)).data?.items
    },

    // 下滑到小程序最下面时加载下一页数据
    async onScrollToLower() {
      this.queryListParam.pageNum += 1
      const arrivalOrderListData = (await getArrivalOrderList(this.queryListParam)).data?.items
      if (arrivalOrderListData && arrivalOrderListData.length > 0) {
        arrivalOrderListData.forEach(model => {
          this.saleReturnOrderList.push(model)
        })
      }
    },


    lookDetailInfo(arrivalCode) {
      uni.navigateTo({
        url: '/pagesMine/warehouse/arrival-order-detail?arrivalCode=' + arrivalCode
      })
    }
  },
  async mounted() {
    await this.changeArrivalOrderList();
  },

}
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>
.dflex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dflexsb() {
  .dflex();
  justify-content: space-between;
}

.dflexsa() {
  .dflex();
  justify-content: space-around;
}

.container {
  height: 90vh;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  overflow: hidden !important;
  background: #f8f8f8;
  color: #333;

  .searchBox {
    .dflexsb();
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;

    .searchBtn {
      padding: 16rpx 0rpx;
      box-sizing: border-box;
      background-color: #47cfc8;
      min-width: 140rpx;
      .dflex();
      color: #fff;
      font-size: 26rpx;
      border-radius: 40rpx;
    }
  }

  .clearSelect {
    padding: 16rpx 0rpx;
    box-sizing: border-box;
    background-color: #808080;
    color: #fff;
    font-size: 26rpx;
    border-radius: 40rpx;
    .dflex
  }

  .content {
    height: 100%;
    overflow-y: scroll;

    .cTop {
      .dflexsb();
      padding: 20rpx 0rpx;
      box-sizing: border-box;

      .statusSelect {
        .dflex();
        justify-content: flex-start;
        height: 80rpx;

        .item {
          width: 120rpx;
          color: #333;
          font-size: 26rpx;
          height: 80rpx;
          .dflex();
          flex-direction: column;
          background-color: transparent !important;

          .line {
            width: 30rpx;
            height: 30rpx;
            border-radius: 90%;
            border-bottom: 4rpx solid transparent;
            transition: all 0.3s linear;
          }

          &.active {
            font-size: 28rpx;
          }

          &.active .line {
            border-bottom: 4rpx solid #47cfc8;
          }
        }
      }
    }

    .list {
      height: 100%;
      overflow-y: scroll;
      padding-bottom: 300rpx;
      box-sizing: border-box;
    }

    .itemSaleReturn {
      padding: 30rpx;
      box-sizing: border-box;
      background: #fff;
      border-radius: 60rpx;
      margin-bottom: 30rpx;

      .iTop {
        font-size: 26rpx;
        font-weight: bolder;
        padding: 0rpx 10rpx;
        box-sizing: border-box;
        .dflexsb();

        .saleReturnShop {
          width: 60%;
        }

        .createTime {
          flex: 1;
          color: red;
          .dflex();
          justify-content: flex-end;
        }

        .stockName {
          color: blue;
          margin-top: 10rpx;
          font-size: 18rpx;
          width: 60%;
        }
      }

      .finishButton {
        margin-top: 10rpx;
        width: 100%;
        .dflex();
        justify-content: flex-end;
      }
    }
  }
}
</style>
